<template>
  <div
      class="draggable-module"
      :draggable="true"
      @dragstart="onDragStart"
      @dragover.prevent
      @drop="onDrop"
  >
    <div class="draggable-item">
      {{ moduleContent }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    moduleContent: {
      type: String,
      required: true
    },
    rows: {
      type: Number,
      default: 1
    },
    cols: {
      type: Number,
      default: 1
    },
    index: {
      type: Number,
      required: true // 新增属性，用于记录模块在网格中的索引
    }
  },
  methods: {
    onDragStart(event) {
      const item = {
        content: this.moduleContent,
        rows: this.rows,
        cols: this.cols,
        index: this.index // 记录模块的索引
      };
      event.dataTransfer.setData('text/plain', JSON.stringify(item));
      this.$store.dispatch('startDrag', item);
    },
    onDrop(event) {
      event.preventDefault();
      const item = JSON.parse(event.dataTransfer.getData('text/plain'));
      this.$store.dispatch('dropItem', {newIndex: this.index, draggedItem: item});
    }
  }
}
</script>

<style scoped>
.draggable-module {
  margin: 20px;
  cursor: move;
}

.draggable-item {
  padding: 10px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
</style>